<template>
  <div class="table_container">
    <el-table
      :data="tableData"
      style="width: 100%; height: 100%"
      :header-cell-style="getRowClass"
      :cell-style="getColumn"
      :row-style="{ fontSize: '10px', height: '5px' }"
      :stripe="tableTypes.stripe">
      <el-table-column
        v-for="(item, index) in tableTypes.formHead"
        :key="index"
        :width="index === 0 ? '140px' : ''"
        :align="needCenter ? 'center' : ''"
        :prop="Object.values(item)[0]">
          <template slot="header">
            <div>{{Object.keys(item)[0]}}</div>
          </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'tables',
  data () {
    return {
      // autoHeight: window.innerHeight
    }
  },
  props: {
    tableTypes: {
      type: Object,
      required: true
    },
    tableData: {
      type: Array,
      required: true
    },
    redColor: {
      type: Boolean
    },
    needCenter: {
      type: Boolean
    }
  },
  computed: {
  },
  created () {
  },
  mounted () {
    this.tableData = this.tableTypes.tableCheckData
    console.log(this.tableTypes,'tableTypes');
    console.log(this.tableData,'tableData');
  },
  methods: {
    getRowClass ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background: rgb(48,52,61);color: rgb(221,224,232);font-weight: unset;font-size: 12px;padding-left: 0px'
      } else {
        return ''
      }
    },
    getColumn ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        if (this.redColor) {
          return ''
        } else {
          return 'color: rgb(201,84,106)'
        }
      }
      if (columnIndex === 0) {
        return 'padding-left: 3px'
      }
    }
  }
}
</script>
<style>
.table_container {
  box-sizing: border-box;
    padding: 8px 0 10px;
    height: 100%;
    width: 100%;
}
.el-table th, .el-table tr {
  background-color: #161e27;
  color: white;
}
/* 取消el-table鼠标移入高亮 */
div /deep/ .el-table tbody tr:hover>td { 
     background: #ccc!important
}
div /deep/ .el-table tbody tr {
  pointer-events:none;
}
/* 取消el-table鼠标移入高亮 */
.el-table__body tr:hover > td {
  background-color: transparent !important;
}
</style>
